<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>

  <!-- 引入vant组件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.5.0-beta2/lib/index.css" />
  <script src="https://cdn.jsdelivr.net/npm/vant@1.5.0-beta2/lib/vant.min.js"></script>

  <!-- 引入ele组件 -->

  <!-- <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css"
    />
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script> -->

  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue-mobile.js"></script>
</head>

<body>
  <div id="app">
    <avue-form :option="option" v-model="obj" @submit="submit"></avue-form>
  </div>
</body>
<script>
  let baseUrl = 'https://cli.avuejs.com/api/area'
  Vue.use(AVUE, {
    ali: {
      region: 'oss-cn-beijing',
      endpoint: 'oss-cn-beijing.aliyuncs.com',
      accessKeyId: 'DVVDfw5e3GK53rxt',
      accessKeySecret: 'T3xEVl1BPOOmBSEfz8w0Qpp9lqmyHa',
      bucket: 'avue',
    },
    qiniu: {
      AK: 'BLEIUCkTJhUKfb7Yl4wa2X-5B6uecKNxoCd93IlG',
      SK: '1_Falie5zL2BH7IBuZSZi1EJqm_5_G1-Gdjz-DS4',
      scope: 'test',
      url: 'http://pm7cc17lu.bkt.clouddn.com/',
    }
  })
  new Vue({
    el: '#app',
    data() {
      return {
        obj: {
          name: '11'
        },
        option: {
          disabled: true,
          column: [
            {
              label: '七牛上传',
              prop: 'imgUrl',
              type: 'upload',
              listType: 'picture-img',
              propsHttp: {
                name: 'hash',
                url: "key"
              },
              oss: 'qiniu',
              loadText: '附件上传中，请稍等',
              span: 24,
              tip: '只能上传jpg/png文件，且不超过500kb',
            },
            {
              label: '阿里上传',
              prop: 'imgUrl',
              type: 'upload',
              listType: 'picture-img',
              canvasOption: {
                text: 'avue',
                ratio: 0.1
              },
              oss: 'ali',
              loadText: '附件上传中，请稍等',
              span: 24,
              tip: '只能上传jpg/png文件，且不超过500kb',
            },
            {
              label: '图片上传',
              prop: 'img',
              type: 'upload',
              limit: 3,
              row: true,
              listType: 'picture-card',
              dataType: 'array',
              action: 'https://jsonplaceholder.typicode.com/posts/',
              rules: [
                {
                  required: true,
                  message: '请选择图片上传',
                  trigger: 'blur'
                }
              ]
            },
            {
              // prefixIcon: 'contact',
              // suffixIcon: 'question',
              label: '姓名',
              prop: 'name',
              rules: [
                {
                  required: true,
                  message: '请选择姓名',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '密码',
              prop: 'password',
              type: 'password',
              rules: [
                {
                  required: true,
                  message: '请选择密码',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '省份',
              prop: 'province',
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              cascaderItem: ['city', 'area'],
              dicUrl: `${baseUrl}/getProvince`,
              rules: [
                {
                  required: true,
                  message: '请选择省份',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '城市',
              prop: 'city',
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              defaultIndex: 1,
              dicFlag: false,
              dicUrl: `${baseUrl}/getCity/{{key}}`,
              rules: [
                {
                  required: true,
                  message: '请选择城市',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '地区',
              prop: 'area',
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              defaultIndex: 1,
              dicFlag: false,
              dicUrl: `${baseUrl}/getArea/{{key}}`,
              row: true,
              rules: [
                {
                  required: true,
                  message: '请选择地区',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '开关',
              prop: 'switch',
              type: 'switch',
              dicData: [
                {
                  label: '关闭',
                  value: 0
                },
                {
                  label: '启动',
                  value: 1
                }
              ],
              rules: [
                {
                  required: true,
                  message: '请选择开关',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '日期时间',
              prop: 'datetime',
              type: 'datetime',
              format: 'yyyy年MM月dd日 hh时mm分ss秒',
              rules: [
                {
                  required: true,
                  message: '请选择文本',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '日期',
              prop: 'date',
              type: 'date',
              valueFormat: "timestamp",
              format: 'yyyy年MM月dd日',
              rules: [
                {
                  required: true,
                  message: '请选择日期',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '时间',
              prop: 'time',
              type: 'time',
              row: true,
              format: 'hh小时mm分',
              rules: [
                {
                  required: true,
                  message: '请选择时间',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '单选',
              prop: 'radio',
              type: 'radio',
              tip: '这是一个小提示',
              tags: true,
              dicData: [
                {
                  label: '单程',
                  value: 0
                },
                {
                  label: '往返',
                  value: 1
                }
              ],
              rules: [
                {
                  required: true,
                  message: '请选择单选',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '多选',
              prop: 'checkbox',
              type: 'checkbox',
              tip: '这是一个小提示',
              tags: true,
              row: true,
              dicData: [
                {
                  label: '飞机',
                  value: 1
                },
                {
                  label: '火车',
                  value: 2
                },
                {
                  label: '动车',
                  value: 3
                },
                {
                  label: '其他',
                  value: 4
                }
              ],
              rules: [
                {
                  required: true,
                  message: '请选择多选',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '文本',
              prop: 'textarea',
              type: 'textarea',
              minRows: 3,
              maxRows: 4,
              rules: [
                {
                  required: true,
                  message: '请选择文本',
                  trigger: 'blur'
                }
              ]
            }
          ]
        }
      }
    },
    mounted() {
      setTimeout(() => {
        this.obj = {
          img: [
            'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?a=1',
            'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?a=2'
          ],
          password: '111',
          province: '130000',
          city: '130100',
          area: '130101',
          radio: 0,
          checkbox: [1, 3],
          switch: 1,
          datetime: '2019-01-01 23:22:22',
          date: 1546838748000,
          time: '03:22'
        }
      }, 0)
    },
    methods: {
      submit() {
        this.$toast(JSON.stringify(this.obj))
      }
    }
  })
</script>

</html>